<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chic Core - 工具函数管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        .admin-container {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* 左侧菜单 */
        .sidebar {
            width: 250px;
            background: #f8f9fa;
            border-right: 1px solid #e0e0e0;
            overflow-y: auto;
            z-index: 1000;
        }

        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid #e0e0e0;
            background: white;
        }

        .sidebar-header h1 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: #333;
        }

        .sidebar-header p {
            font-size: 0.9rem;
            color: #666;
        }

        .menu-section {
            margin-bottom: 10px;
        }

        .menu-section-title {
            padding: 12px 20px;
            font-weight: 600;
            color: #333;
            background: #f0f0f0;
            border-bottom: 1px solid #e0e0e0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background-color 0.3s ease;
        }

        .menu-section-title:hover {
            background: #e8e8e8;
        }

        .menu-section-title .arrow {
            font-size: 0.8rem;
            transition: transform 0.3s ease;
        }

        .menu-section-title.collapsed .arrow {
            transform: rotate(-90deg);
        }

        .menu-section-title.expanded .arrow {
            transform: rotate(0deg);
        }

        .menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
            background: white;
            display: none;
        }

        .menu-list.expanded {
            display: block;
        }

        .menu-item {
            border-bottom: 1px solid #f0f0f0;
        }

        .menu-item:last-child {
            border-bottom: none;
        }

        .menu-link {
            display: block;
            padding: 12px 20px 12px 40px;
            color: #666;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            font-size: 0.9rem;
        }

        .menu-link:hover {
            background-color: #f8f9fa;
            color: #333;
        }

        .menu-link.active {
            background-color: #e3f2fd;
            color: #1976d2;
            border-right: 3px solid #1976d2;
        }

        .menu-link.active::before {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid #f8f9fa;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
        }

        .menu-icon {
            margin-right: 8px;
            font-size: 1rem;
        }

        /* 右侧内容区域 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .content-header {
            background: white;
            padding: 20px 30px;
            border-bottom: 1px solid #e0e0e0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .content-title {
            font-size: 1.8rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .content-subtitle {
            color: #666;
            font-size: 0.95rem;
        }

        .content-body {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            background: #f8f9fa;
        }

        /* 工具函数卡片 */
        .function-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .function-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border-left: 4px solid #667eea;
        }

        .function-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }

        .function-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            font-family: 'Courier New', monospace;
        }

        .function-description {
            color: #666;
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .function-params {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            font-size: 0.85rem;
            color: #555;
            font-family: 'Courier New', monospace;
            margin-bottom: 10px;
        }

        .function-return {
            background: #e8f5e8;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 0.85rem;
            color: #2d5a2d;
            font-family: 'Courier New', monospace;
        }

        /* 工具模块介绍 */
        .module-intro {
            background: white;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .module-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .module-icon {
            margin-right: 10px;
            font-size: 1.3rem;
        }

        .module-description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .module-stats {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .stat-item {
            background: #f8f9fa;
            padding: 10px 15px;
            border-radius: 6px;
            font-size: 0.9rem;
            color: #555;
        }

        .stat-number {
            font-weight: 600;
            color: #667eea;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .admin-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                height: auto;
                max-height: 200px;
            }

            .menu-list {
                display: flex;
                overflow-x: auto;
            }

            .menu-item {
                flex-shrink: 0;
                border-bottom: none;
                border-right: 1px solid rgba(255,255,255,0.05);
            }

            .menu-link {
                white-space: nowrap;
                padding: 15px 20px;
            }

            .content-body {
                padding: 20px;
            }

            .function-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 50px;
            color: #666;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 滚动条样式 */
        .sidebar::-webkit-scrollbar,
        .content-body::-webkit-scrollbar {
            width: 6px;
        }

        .sidebar::-webkit-scrollbar-track,
        .content-body::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
        }

        .sidebar::-webkit-scrollbar-thumb,
        .content-body::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover,
        .content-body::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <div class="admin-container">
        <!-- 左侧菜单 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <h1>Chic Core</h1>
                <p>工具函数管理系统</p>
            </div>
            
            <!-- 基础工具模块 -->
            <div class="menu-section">
                <div class="menu-section-title expanded" data-section="basic">
                    <span>基础工具模块</span>
                    <span class="arrow">▼</span>
                </div>
                <ul class="menu-list expanded" id="basicMenu">
                    <li class="menu-item">
                        <a href="#" class="menu-link active" data-module="date">
                            <span class="menu-icon">📅</span>
                            日期工具
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="string">
                            <span class="menu-icon">📝</span>
                            字符串工具
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="array">
                            <span class="menu-icon">📊</span>
                            数组工具
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="object">
                            <span class="menu-icon">📦</span>
                            对象工具
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 验证与存储 -->
            <div class="menu-section">
                <div class="menu-section-title collapsed" data-section="validation">
                    <span>验证与存储</span>
                    <span class="arrow">▶</span>
                </div>
                <ul class="menu-list" id="validationMenu">
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="validate">
                            <span class="menu-icon">✅</span>
                            验证工具
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="storage">
                            <span class="menu-icon">💾</span>
                            存储工具
                        </a>
                    </li>
                </ul>
            </div>

            <!-- DOM与格式化 -->
            <div class="menu-section">
                <div class="menu-section-title collapsed" data-section="dom">
                    <span>DOM与格式化</span>
                    <span class="arrow">▶</span>
                </div>
                <ul class="menu-list" id="domMenu">
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="dom">
                            <span class="menu-icon">🌐</span>
                            DOM工具
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="format">
                            <span class="menu-icon">🎨</span>
                            格式化工具
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 文件与请求 -->
            <div class="menu-section">
                <div class="menu-section-title collapsed" data-section="file">
                    <span>文件与请求</span>
                    <span class="arrow">▶</span>
                </div>
                <ul class="menu-list" id="fileMenu">
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="file">
                            <span class="menu-icon">📁</span>
                            文件工具
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="request">
                            <span class="menu-icon">🔄</span>
                            请求控制工具
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="http">
                            <span class="menu-icon">🌍</span>
                            HTTP请求工具
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 数据结构 -->
            <div class="menu-section">
                <div class="menu-section-title collapsed" data-section="data">
                    <span>数据结构</span>
                    <span class="arrow">▶</span>
                </div>
                <ul class="menu-list" id="dataMenu">
                    <li class="menu-item">
                        <a href="#" class="menu-link" data-module="tree">
                            <span class="menu-icon">🌳</span>
                            树结构工具
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- 右侧内容区域 -->
        <main class="main-content">
            <header class="content-header">
                <h2 class="content-title" id="contentTitle">日期工具 (date)</h2>
                <p class="content-subtitle" id="contentSubtitle">提供日期时间相关的工具函数</p>
            </header>
            <div class="content-body" id="contentBody">
                <div class="loading">
                    <div class="loading-spinner"></div>
                    <p>正在加载工具函数信息...</p>
                </div>
            </div>
        </main>
    </div>

    <!-- 引入Chic Core -->
    <script src="./dist/index.umd.js?v=4"></script>
    
    <script>
        // 工具模块信息
        const moduleInfo = {
            date: {
                title: '日期工具 (date)',
                subtitle: '提供日期时间相关的工具函数',
                icon: '📅',
                description: '包含日期格式化、解析、计算、比较等常用功能，支持多种日期格式和时区处理。',
                functions: [
                    {
                        name: 'formatDate',
                        description: '格式化日期为指定格式的字符串',
                        params: '(date, format)',
                        return: 'string'
                    },
                    {
                        name: 'getRelativeTime',
                        description: '获取相对时间描述（如：3分钟前）',
                        params: '(date)',
                        return: 'string'
                    },
                    {
                        name: 'isToday',
                        description: '判断是否为今天',
                        params: '(date)',
                        return: 'boolean'
                    },
                    {
                        name: 'addDays',
                        description: '添加指定天数到日期',
                        params: '(date, days)',
                        return: 'Date'
                    },
                    {
                        name: 'diffDates',
                        description: '计算两个日期之间的差值',
                        params: '(date1, date2)',
                        return: 'object'
                    }
                ]
            },
            string: {
                title: '字符串工具 (string)',
                subtitle: '提供字符串处理相关的工具函数',
                icon: '📝',
                description: '包含字符串格式化、转换、验证、搜索等常用功能，支持多种字符串操作。',
                functions: [
                    {
                        name: 'capitalize',
                        description: '将字符串首字母大写',
                        params: '(str)',
                        return: 'string'
                    },
                    {
                        name: 'camelCase',
                        description: '转换为驼峰命名格式',
                        params: '(str)',
                        return: 'string'
                    },
                    {
                        name: 'kebabCase',
                        description: '转换为短横线命名格式',
                        params: '(str)',
                        return: 'string'
                    },
                    {
                        name: 'truncate',
                        description: '截断字符串到指定长度',
                        params: '(str, length)',
                        return: 'string'
                    },
                    {
                        name: 'generateUUID',
                        description: '生成UUID字符串',
                        params: '()',
                        return: 'string'
                    }
                ]
            },
            array: {
                title: '数组工具 (array)',
                subtitle: '提供数组操作相关的工具函数',
                icon: '📊',
                description: '包含数组去重、排序、分组、过滤、查找等常用功能，支持复杂数组操作。',
                functions: [
                    {
                        name: 'unique',
                        description: '数组去重',
                        params: '(arr)',
                        return: 'Array'
                    },
                    {
                        name: 'groupBy',
                        description: '按指定字段分组',
                        params: '(arr, key)',
                        return: 'object'
                    },
                    {
                        name: 'sortBy',
                        description: '按指定字段排序',
                        params: '(arr, key)',
                        return: 'Array'
                    },
                    {
                        name: 'flatten',
                        description: '扁平化数组',
                        params: '(arr)',
                        return: 'Array'
                    },
                    {
                        name: 'chunk',
                        description: '将数组分割成指定大小的块',
                        params: '(arr, size)',
                        return: 'Array'
                    }
                ]
            },
            object: {
                title: '对象工具 (object)',
                subtitle: '提供对象操作相关的工具函数',
                icon: '📦',
                description: '包含对象深拷贝、合并、取值、设置等常用功能，支持复杂对象操作。',
                functions: [
                    {
                        name: 'deepClone',
                        description: '深拷贝对象',
                        params: '(obj)',
                        return: 'any'
                    },
                    {
                        name: 'merge',
                        description: '合并对象',
                        params: '(target, ...sources)',
                        return: 'object'
                    },
                    {
                        name: 'get',
                        description: '获取嵌套对象属性值',
                        params: '(obj, path)',
                        return: 'any'
                    },
                    {
                        name: 'set',
                        description: '设置嵌套对象属性值',
                        params: '(obj, path, value)',
                        return: 'object'
                    },
                    {
                        name: 'pick',
                        description: '选择指定属性',
                        params: '(obj, keys)',
                        return: 'object'
                    }
                ]
            },
            validate: {
                title: '验证工具 (validate)',
                subtitle: '提供数据验证相关的工具函数',
                icon: '✅',
                description: '包含邮箱、手机号、身份证、密码等常用验证功能，支持自定义验证规则。',
                functions: [
                    {
                        name: 'isEmail',
                        description: '验证邮箱格式',
                        params: '(email)',
                        return: 'boolean'
                    },
                    {
                        name: 'isPhone',
                        description: '验证手机号格式',
                        params: '(phone)',
                        return: 'boolean'
                    },
                    {
                        name: 'isIdCard',
                        description: '验证身份证号格式',
                        params: '(idCard)',
                        return: 'boolean'
                    },
                    {
                        name: 'isUrl',
                        description: '验证URL格式',
                        params: '(url)',
                        return: 'boolean'
                    },
                    {
                        name: 'isPassword',
                        description: '验证密码强度',
                        params: '(password)',
                        return: 'boolean'
                    }
                ]
            },
            storage: {
                title: '存储工具 (storage)',
                subtitle: '提供本地存储相关的工具函数',
                icon: '💾',
                description: '包含localStorage、sessionStorage、Cookie等存储操作，支持数据序列化。',
                functions: [
                    {
                        name: 'setLocalStorage',
                        description: '设置localStorage',
                        params: '(key, value)',
                        return: 'boolean'
                    },
                    {
                        name: 'getLocalStorage',
                        description: '获取localStorage',
                        params: '(key, defaultValue)',
                        return: 'any'
                    },
                    {
                        name: 'setSessionStorage',
                        description: '设置sessionStorage',
                        params: '(key, value)',
                        return: 'boolean'
                    },
                    {
                        name: 'setCookie',
                        description: '设置Cookie',
                        params: '(name, value, options)',
                        return: 'void'
                    },
                    {
                        name: 'getCookie',
                        description: '获取Cookie',
                        params: '(name)',
                        return: 'string'
                    }
                ]
            },
            dom: {
                title: 'DOM工具 (dom)',
                subtitle: '提供DOM操作相关的工具函数',
                icon: '🌐',
                description: '包含元素选择、样式操作、事件处理、动画效果等常用功能。',
                functions: [
                    {
                        name: '$',
                        description: '选择单个元素',
                        params: '(selector)',
                        return: 'Element'
                    },
                    {
                        name: '$$',
                        description: '选择多个元素',
                        params: '(selector)',
                        return: 'NodeList'
                    },
                    {
                        name: 'addClass',
                        description: '添加CSS类',
                        params: '(element, className)',
                        return: 'void'
                    },
                    {
                        name: 'removeClass',
                        description: '移除CSS类',
                        params: '(element, className)',
                        return: 'void'
                    },
                    {
                        name: 'debounce',
                        description: '防抖函数',
                        params: '(func, delay)',
                        return: 'function'
                    }
                ]
            },
            format: {
                title: '格式化工具 (format)',
                subtitle: '提供数据格式化相关的工具函数',
                icon: '🎨',
                description: '包含数字、货币、文件大小、百分比等格式化功能。',
                functions: [
                    {
                        name: 'formatNumber',
                        description: '格式化数字',
                        params: '(num, options)',
                        return: 'string'
                    },
                    {
                        name: 'formatCurrency',
                        description: '格式化货币',
                        params: '(amount, currency, options)',
                        return: 'string'
                    },
                    {
                        name: 'formatFileSize',
                        description: '格式化文件大小',
                        params: '(bytes)',
                        return: 'string'
                    },
                    {
                        name: 'formatPercentage',
                        description: '格式化百分比',
                        params: '(value, decimals)',
                        return: 'string'
                    },
                    {
                        name: 'formatPhone',
                        description: '格式化手机号',
                        params: '(phone)',
                        return: 'string'
                    }
                ]
            },
            file: {
                title: '文件工具 (file)',
                subtitle: '提供文件操作相关的工具函数',
                icon: '📁',
                description: '包含文件下载、上传、预览、验证等常用功能。',
                functions: [
                    {
                        name: 'downloadFile',
                        description: '下载文件',
                        params: '(data, filename)',
                        return: 'void'
                    },
                    {
                        name: 'uploadFile',
                        description: '上传文件',
                        params: '(file, options)',
                        return: 'Promise'
                    },
                    {
                        name: 'previewFile',
                        description: '预览文件',
                        params: '(file)',
                        return: 'Promise'
                    },
                    {
                        name: 'validateFile',
                        description: '验证文件',
                        params: '(file, options)',
                        return: 'object'
                    },
                    {
                        name: 'getFileExtension',
                        description: '获取文件扩展名',
                        params: '(filename)',
                        return: 'string'
                    }
                ]
            },
            request: {
                title: '请求控制工具 (request)',
                subtitle: '提供请求控制相关的工具函数',
                icon: '🔄',
                description: '包含防重复请求、缓存、并发控制、重试等高级功能。',
                functions: [
                    {
                        name: 'deduplicateRequest',
                        description: '防重复请求',
                        params: '(key, requestFn)',
                        return: 'Promise'
                    },
                    {
                        name: 'cachedRequest',
                        description: '缓存请求',
                        params: '(key, requestFn)',
                        return: 'Promise'
                    },
                    {
                        name: 'controlledRequest',
                        description: '并发控制请求',
                        params: '(requestFn, options)',
                        return: 'Promise'
                    },
                    {
                        name: 'withRetry',
                        description: '重试装饰器',
                        params: '(fn, options)',
                        return: 'function'
                    },
                    {
                        name: 'withTimeout',
                        description: '超时装饰器',
                        params: '(fn, timeout)',
                        return: 'function'
                    }
                ]
            },
            tree: {
                title: '树结构工具 (tree)',
                subtitle: '提供树结构操作相关的工具函数',
                icon: '🌳',
                description: '包含数组转树、树转数组、节点查找、遍历等常用功能。',
                functions: [
                    {
                        name: 'arrayToTree',
                        description: '数组转树结构',
                        params: '(arr, options)',
                        return: 'Array'
                    },
                    {
                        name: 'treeToArray',
                        description: '树结构转数组',
                        params: '(tree, options)',
                        return: 'Array'
                    },
                    {
                        name: 'findTreeNode',
                        description: '查找树节点',
                        params: '(tree, predicate)',
                        return: 'object'
                    },
                    {
                        name: 'traverseTree',
                        description: '遍历树结构',
                        params: '(tree, callback)',
                        return: 'void'
                    },
                    {
                        name: 'getTreeDepth',
                        description: '获取树深度',
                        params: '(tree)',
                        return: 'number'
                    }
                ]
            },
            http: {
                title: 'HTTP请求工具 (http)',
                subtitle: '提供HTTP请求相关的工具函数',
                icon: '🌍',
                description: '基于Axios封装的HTTP客户端，支持拦截器、重试、缓存等高级功能。',
                functions: [
                    {
                        name: 'createHttpClient',
                        description: '创建HTTP客户端',
                        params: '(config)',
                        return: 'HttpClient'
                    },
                    {
                        name: 'httpClient',
                        description: '默认HTTP客户端实例',
                        params: '()',
                        return: 'HttpClient'
                    },
                    {
                        name: 'HttpConfig',
                        description: 'HTTP配置类',
                        params: '()',
                        return: 'HttpConfig'
                    },
                    {
                        name: 'HttpClient',
                        description: 'HTTP客户端类',
                        params: '(config)',
                        return: 'HttpClient'
                    },
                    {
                        name: 'HTTP_STATUS',
                        description: 'HTTP状态码常量',
                        params: '()',
                        return: 'object'
                    }
                ]
            }
        };

        // 初始化应用
        document.addEventListener('DOMContentLoaded', function() {
            // 检查ChicCore是否加载成功
            if (typeof ChicCore === 'undefined') {
                document.getElementById('contentBody').innerHTML = `
                    <div class="module-intro">
                        <h3 style="color: #e74c3c;">❌ 加载失败</h3>
                        <p>无法加载 ChicCore 库，请确保已构建项目：</p>
                        <pre style="background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
npm run build
                        </pre>
                    </div>
                `;
                return;
            }

            // 获取ChicCore的导出对象
            const utils = ChicCore.default || ChicCore;
            console.log('ChicCore 加载成功:', utils);

            // 初始化菜单
            initMenu();
            
            // 加载默认模块
            loadModule('date');
        });

        // 初始化菜单
        function initMenu() {
            // 初始化菜单链接点击事件
            const menuLinks = document.querySelectorAll('.menu-link');
            menuLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有active类
                    menuLinks.forEach(l => l.classList.remove('active'));
                    
                    // 添加active类到当前链接
                    this.classList.add('active');
                    
                    // 加载对应模块
                    const module = this.getAttribute('data-module');
                    loadModule(module);
                });
            });

            // 初始化折叠菜单功能
            const sectionTitles = document.querySelectorAll('.menu-section-title');
            sectionTitles.forEach(title => {
                title.addEventListener('click', function() {
                    const section = this.getAttribute('data-section');
                    const menuList = document.getElementById(section + 'Menu');
                    const arrow = this.querySelector('.arrow');
                    
                    if (this.classList.contains('expanded')) {
                        // 折叠
                        this.classList.remove('expanded');
                        this.classList.add('collapsed');
                        menuList.classList.remove('expanded');
                        arrow.textContent = '▶';
                    } else {
                        // 展开
                        this.classList.remove('collapsed');
                        this.classList.add('expanded');
                        menuList.classList.add('expanded');
                        arrow.textContent = '▼';
                    }
                });
            });
        }

        // 加载模块内容
        function loadModule(moduleName) {
            const module = moduleInfo[moduleName];
            if (!module) return;

            // 更新标题
            document.getElementById('contentTitle').textContent = module.title;
            document.getElementById('contentSubtitle').textContent = module.subtitle;

            // 生成内容
            const content = generateModuleContent(module);
            document.getElementById('contentBody').innerHTML = content;
        }

        // 生成模块内容
        function generateModuleContent(module) {
            const functionCards = module.functions.map(func => `
                <div class="function-card">
                    <div class="function-name">${func.name}</div>
                    <div class="function-description">${func.description}</div>
                    <div class="function-params">参数: ${func.params}</div>
                    <div class="function-return">返回: ${func.return}</div>
                </div>
            `).join('');

            return `
                <div class="module-intro">
                    <div class="module-title">
                        <span class="module-icon">${module.icon}</span>
                        ${module.title}
                    </div>
                    <div class="module-description">${module.description}</div>
                    <div class="module-stats">
                        <div class="stat-item">
                            <span class="stat-number">${module.functions.length}</span> 个函数
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">100%</span> 测试覆盖
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">TypeScript</span> 类型支持
                        </div>
                    </div>
                </div>
                <div class="function-grid">
                    ${functionCards}
                </div>
            `;
        }
    </script>
</body>
</html>
